<template>
    <div class="wrap">
        <div class="home">
            <div class="w">
                <!-- 头部-dt -->
                <div class="home-dt">
                    <div class="logo">在线音乐</div>
                    <div class="dt-nav">
                        <span @click="toggleDtNavStyle('音乐馆')" :class="currentDtNav == '音乐馆' ? 'current-nav' : ''">音乐馆</span>
                        <span @click="toggleDtNavStyle('下载客户端')" :class="currentDtNav == '下载客户端' ? 'current-nav' : ''">下载客户端</span>
                    </div>
                </div>
                <!-- 头部-dd -->
                <div class="home-dd">
                    <span @click="toggleDdNavStyle('首页')" :class="currentDdNav == '首页' ? 'current-dd' : ''">首页</span>
                    <span @click="toggleDdNavStyle('歌手')" :class="currentDdNav == '歌手' ? 'current-dd' : ''">歌手</span>
                    <span @click="toggleDdNavStyle('新碟')" :class="currentDdNav == '新碟' ? 'current-dd' : ''">新碟</span>
                    <span @click="toggleDdNavStyle('排行榜')" :class="currentDdNav == '排行榜' ? 'current-dd' : ''">排行榜</span>
                    <span @click="toggleDdNavStyle('分类歌单')" :class="currentDdNav == '分类歌单' ? 'current-dd' : ''">分类歌单</span>
                    <span @click="toggleDdNavStyle('电台')" :class="currentDdNav == '电台' ? 'current-dd' : ''">电台</span>
                    <span @click="toggleDdNavStyle('MV')" :class="currentDdNav == 'MV' ? 'current-dd' : ''">MV</span>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="container">
            <router-view
            @stopMusic="stopMusic"
            @addPlayList="addPlayList($event)"
            @playSongAll="playSongAll($event)"
            @playSong="playSong($event)" />
        </div>

        <!-- 播放器 -->
        <t-play ref="play"></t-play>
    </div>
</template>

<script>
// 播放组件
import Play from '../components/Play'
// 首页组件
import Index from '../components/Index'
export default {
    components: {
        't-play': Play,
        't-index': Index
    },
    data() {
        return {
            // 当前所在的dt-nav
            currentDtNav: '音乐馆',
            // 当前所在dd-nav
            currentDdNav: this.$store.state.currentDdNav
        }
    },
    methods: {
        // 切换dt-nav的样式
        toggleDtNavStyle(navName) {
            this.currentDtNav = navName;
        },
        // 切换dd-nav的样式
        toggleDdNavStyle(navName) {
            this.currentDdNav = navName;
            this.$store.commit('setCurrentDdNav', navName);
            if (navName == '首页') {
                this.$router.push('/index');
            } else if (navName == '歌手') {
                this.$router.push('/singer');
            } else if (navName == '新碟') {
                this.$router.push('/new/album');
            } else if (navName == '排行榜') {
                this.$router.push('/top');
            } else if (navName == '分类歌单') {
                this.$router.push('/playlist');
            } else if (navName == 'MV') {
                this.$router.push('/mv');
            }
        },
        // 播放音乐
        async playSong(id) {
            // 检测音乐是否可用
            try {
                let { data: is } = await this.$http.get('/check/music', { params: { id } });
                if (is.success == true) {
                    this.$refs.play.playSong(id);
                } else {
                    this.$message.error('该歌曲暂无版权');
                }
            } catch (error) {
                this.$message.error('该歌曲暂无版权');
            }
            
        },
        // 播放全部音乐
        async playSongAll(all) {
            this.$refs.play.playSongAll(all);
        },
        // 添加到播放队列
        addPlayList(item) {
            this.$refs.play.addPlayList(item);
        },
        // 暂停播放
        stopMusic() {
            this.$refs.play.stopMusic();
        }
    }
}
</script>

<style lang="less" scoped>
.wrap {
    padding-bottom: 80px;
}
.home {
    background-color: #fff;
}
.home-dt {
    display: flex;
    height: 90px;
    line-height: 90px;
    border-bottom: 1px solid #f2f2f2;
    .logo {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 2px;
        margin-right: 30px;
    }
    .dt-nav {
        flex: 1;
        span {
            display: inline-block;
            padding: 0 20px;
            height: 100%;
            color: #000;
            cursor: pointer;
            background-color: #fff;
            font-size: 20px;
        }
        .current-nav {
            background-color: #3ec481!important;
            color: #fff!important;
        }
    }
}
.home-dd {
    padding-left: 160px;
    height: 50px;
    line-height: 50px;
    span {
        margin-right: 44px;
        color: #000;
        cursor: pointer;
        font-size: 14px;
        &:hover {
            color: #3ec481;
        }
    }
    .current-dd {
        color: #3ec481!important;
    }
}
</style>